<template>
  <div class="gray-page">
    <nav-bar title="二维码名片" theme="black"></nav-bar>
    <div class="code">
      <div class="code-box">
        <div class="code-box-left">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        </div>
        <div class="code-box-right">
          <p>
            <span>{{ personalInfo.gridPersonName }}</span>
            <span>{{ personalInfo.gridPersonTypeName }}</span>
          </p>
          <p>{{ personalInfo.phone }}</p>
          <p>{{ personalInfo.regionAddress }}</p>
        </div>
      </div>
      <div id="qrcode">
        <vue-qr :size="200" draggable="false" :correctLevel="3" :dotScale="1" :margin="15" :text="qrcodeText"></vue-qr>
      </div>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
export default {
  name: 'index',
  components: {
    vueQr
  },
  data() {
    return {
      personalInfo: {},
      qrcodeText: ''
    }
  },
  mounted() {
    const personalObj = decodeURIComponent(this.$route.query.personalInfo)
    this.personalInfo = JSON.parse(personalObj)
    this.qrcodeText =
      this.personalInfo.gridPersonName +
      ',' +
      this.personalInfo.gridPersonTypeName +
      ',' +
      this.personalInfo.phone +
      ',' +
      this.personalInfo.regionAddress
    console.log(this.qrcodeText)
    // this.qrcode()
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/my/qrcode.less';
</style>
